import React, {
    createContext,
    ReactNode,
    useContext,
    useEffect,
    useState,
} from "react";

import type { Action } from "antd-mobile/es/components/action-sheet";
export type NavigationContextType = {
    title: string | null;
    setTitle: (title: NavigationContextType["title"]) => void;
    actions: Action[];
    setActions: (actions: NavigationContextType["actions"]) => void;
    search: (() => void) | undefined;
    setSearch: (actions: NavigationContextType["search"]) => void;
};
export const NavBarContext = createContext<NavigationContextType | undefined>(
    undefined
);

export const NavBarConsumer = ({
    title = null,
    actions = [],
    children,
}: { children: React.ReactNode } & Pick<
    NavigationContextType,
    "title" | "actions"
>) => {
    const navBarContext = useContext(NavBarContext);
    const setNavBar = () => {
        if (navBarContext) {
            const { setTitle, setActions } = navBarContext;
            setTitle(title);
            setActions(actions);
        }
    };
    useEffect(() => {
        setNavBar();
    }, [title, actions]);
    return <>children</>;
};
